<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="6" class="card-box">
          <el-card>
            <div class="el-table el-table--enable-row-hover el-table--medium ">
              <div>
                <span style="font-size: 20px">
                  <i class="el-icon-odometer"></i>
                  CPU使用率：(单位：%)
                </span>
              </div>
              <div ref="cpuUtilization" style="height: 200px" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" class="card-box">
          <el-card>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div slot="header">
                <span style="font-size: 20px">
                  <i class="el-icon-odometer"></i>
                  JVM内存占用：(单位：MB)
                </span>
              </div>
              <div ref="jvmUsedmemory" style="height: 200px" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" class="card-box">
          <el-card>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div slot="header">
                <span style="font-size: 20px">
                  <i class="el-icon-odometer"></i>
                  磁盘占用：(单位：GB)
                </span>
              </div>
              <div ref="memUsedmemory" style="height: 200px" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" class="card-box">
          <el-card>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div slot="header">
                <span style="font-size: 20px">
                  <i class="el-icon-odometer"></i>
                  系统内存占用：(单位：GB)
                </span>
              </div>
              <div ref="sysUsedmemory" style="height: 200px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 10px">
      <el-row>
        <el-col :span="24" class="card-box">
          <el-card>
            <div slot="header">
              <span>网络流量</span>
              <el-radio-group v-model="timeQuantum" @change="time" style="margin-left: 764px">
                <el-radio-button label="最近一小时">最近一小时</el-radio-button>
                <el-radio-button label="最近一天">最近一天</el-radio-button>
                <el-radio-button label="最近一周">最近一周</el-radio-button>
              </el-radio-group>
              <el-date-picker style="margin-left: 10px;" v-model="networkFlowQueryParams" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange">
              </el-date-picker>
            </div>
            <div>
              <div ref="networkFlow" style="height: 300px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 10px">
      <el-row>
        <el-col :span="12" class="card-box">
          <el-card>
            <div>
              <div slot="header">
                <span>CPU使用趋势</span>

                <el-date-picker style="margin-left: 10px" v-model="CPUQueryParams" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange">
                </el-date-picker>
              </div>
              <div ref="cpuUsageTrends" style="height: 300px" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="card-box">
          <el-card>
            <div>
              <div slot="header">
                <span>JVM使用趋势</span>
                <el-date-picker style="margin-left: 10px" v-model="JVMQueryParams" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
              <div ref="jvmUsageTrends" style="height: 300px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getServer } from '@/api/monitor/server'
import * as echarts from 'echarts'

export default {
  name: 'Cache',
  data() {
    return {
      cpu: null,
      jvm: null,
      mem: null,
      sys: [],
      networkFlow: null,
      cpuUtilization: null,
      cpuUsageTrends: null,
      jvmUsedmemory: null,
      jvmUsageTrends: null,
      memUsedmemory: null,
      sysUsedmemory: null,
      sysTotal: 0,
      sysUsed: 0,
      timeQuantum: null,
      networkFlowQueryParams: null,
      JVMQueryParams: null,
      CPUQueryParams: null,
      queryParams: []
    }
  },
  created() {
    this.getList()
    this.openLoading()
  },
  methods: {
    //延迟的方法
    sleep1(numberMillis) {
      var now = new Date()
      var exitTime = now.getTime() + numberMillis
      while (true) {
        now = new Date()
        if (now.getTime() > exitTime) return
      }
    },
    dateChange(data) {
      console.log(this.networkFlowQueryParams)
      this.timeQuantum = null
    },
    time(data) {
      console.log(this.timeQuantum)
      this.networkFlowQueryParams = null
    },
    /** 查缓存询信息 */
    getList() {
      getServer().then(response => {
        this.$modal.closeLoading()
        this.cpu = response.data.cpu
        this.jvm = response.data.jvm
        this.mem = response.data.mem
        this.sys = response.data.sysFiles
        this.cpuUtilization = echarts.init(this.$refs.cpuUtilization)
        this.cpuUtilization.setOption({
          tooltip: {
            formatter: ' CPU使用率<br/>百分之 : ' + this.cpu.total / 100000
          },
          series: [
            {
              name: '百分之',
              radius: '100%',
              type: 'gauge',
              min: 0,
              max: 100,
              splitNumber: 5,
              detail: {
                show: true,
                formatter: '{value}%',
                textStyle: {
                  fontSize: 20
                }
              },
              data: [
                {
                  value: (this.cpu.total / 100000).toFixed(2)
                }
              ],
              center: ['50%', '60%'],
              axisTick: {
                // 短刻度样式
                distance: -5, // 位置
                lineStyle: {
                  width: 1,
                  color: '#0063bb'
                },
                show: true // false表示不显示
              },
              // 坐标轴线
              axisLine: {
                show: true,
                roundCap: true,
                lineStyle: {
                  width: 20
                }
              },
              // 进度条
              progress: {
                show: true,
                width: 5,
                roundCap: true
              },
              splitLine: {
                // 长刻度设置
                distance: -15, // 位置
                length: 10,
                lineStyle: {
                  width: 3,
                  color: '#0063bb'
                }
              },
              axisLabel: {
                // 刻度值
                show: true,
                distance: 30, // 位置
                color: '#5d0caa',
                fontSize: 12
              }
              // color:'#ff5b4d'
            }
          ]
        })
        this.jvmUsedmemory = echarts.init(this.$refs.jvmUsedmemory)
        this.jvmUsedmemory.setOption({
          tooltip: {
            formatter: 'JVM内存占用 <br/>JVM内存共 : ' + this.jvm.max + 'MB' + '<br/>已占用 : ' + this.jvm.total + 'MB'
          },
          series: [
            {
              radius: '100%',
              type: 'gauge',
              min: 0,
              max: parseInt(this.jvm.max),
              splitNumber: 5,
              detail: {
                formatter: '{value}MB',
                textStyle: {
                  fontSize: 20
                }
              },
              // 进度条
              progress: {
                show: true,
                width: 5,
                roundCap: true
              },
              data: [
                {
                  value: this.jvm.total
                }
              ],
              center: ['50%', '60%'],
              axisTick: {
                // 短刻度样式
                distance: -5, // 位置
                lineStyle: {
                  width: 1,
                  color: '#0063bb'
                },
                show: true // false表示不显示
              },
              // 坐标轴线
              axisLine: {
                show: true,
                roundCap: true,
                lineStyle: {
                  width: 20
                }
              },
              splitLine: {
                // 长刻度设置
                distance: -15, // 位置
                length: 10,
                lineStyle: {
                  width: 3,
                  color: '#0063bb'
                }
              },
              axisLabel: {
                // 刻度值
                // show:false
                distance: 30, // 位置
                color: '#5d0caa',
                fontSize: 12
              }
            }
          ]
        })
        this.memUsedmemory = echarts.init(this.$refs.memUsedmemory)
        this.memUsedmemory.setOption({
          tooltip: {
            formatter: '磁盘占用 <br/>磁盘内存共 : ' + this.mem.total + 'GB' + '<br/>已使用 : ' + this.mem.used + 'GB'
          },
          series: [
            {
              radius: '100%',
              type: 'gauge',
              min: 0,
              max: parseInt(this.mem.total),
              splitNumber: 5,
              detail: {
                formatter: '{value}GB',
                textStyle: {
                  fontSize: 20
                }
              },
              data: [
                {
                  value: this.mem.used
                }
              ],
              center: ['50%', '60%'],
              axisTick: {
                // 短刻度样式
                distance: -5, // 位置
                lineStyle: {
                  width: 1,
                  color: '#0063bb'
                },
                show: true // false表示不显示
              },
              // 坐标轴线
              axisLine: {
                show: true,
                roundCap: true,
                lineStyle: {
                  width: 20
                }
              },
              // 进度条
              progress: {
                show: true,
                width: 5,
                roundCap: true
              },
              splitLine: {
                // 长刻度设置
                distance: -15, // 位置
                length: 10,
                lineStyle: {
                  width: 3,
                  color: '#0063bb'
                }
              },
              axisLabel: {
                // 刻度值
                // show:false
                distance: 30, // 位置
                color: '#5d0caa',
                fontSize: 12
              }
            }
          ]
        })
        for (let i = 0; i < this.sys.length; i++) {
          var sy = this.sys[i]
          this.sysTotal += parseInt(sy.total.replace('GB', ''))
          this.sysUsed += parseInt(sy.used.replace('GB', ''))
        }
        this.sysUsedmemory = echarts.init(this.$refs.sysUsedmemory)
        this.sysUsedmemory.setOption({
          tooltip: {
            formatter: '系统内存占用 <br/>总内存共 : ' + this.sysTotal + 'GB' + '<br/>已使用 : ' + this.sysUsed + 'GB'
          },
          series: [
            {
              radius: '100%',
              type: 'gauge',
              min: 0,
              max: this.sysTotal,
              splitNumber: 5,
              detail: {
                // show: false, // false表示不显示
                formatter: '{value}GB',
                textStyle: {
                  fontSize: 20
                }
              },
              data: [
                {
                  value: this.sysUsed
                }
              ],
              center: ['50%', '60%'],
              axisTick: {
                // 短刻度样式
                distance: -5, // 位置
                lineStyle: {
                  width: 1,
                  color: '#0063bb'
                },
                show: true // false表示不显示
              },
              // 进度条
              progress: {
                show: true,
                width: 5,
                roundCap: true
              },
              // 坐标轴线
              axisLine: {
                show: true,
                roundCap: true,
                lineStyle: {
                  width: 20
                }
              },
              splitLine: {
                // 长刻度设置
                distance: -15, // 位置
                length: 10,
                lineStyle: {
                  width: 3,
                  color: '#0063bb'
                }
              },
              axisLabel: {
                // 刻度值
                show: true,
                distance: 30, // 位置
                color: '#5d0caa',
                fontSize: 12
              }
            }
          ]
        })
        this.networkFlow = echarts.init(this.$refs.networkFlow)
        this.networkFlow.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['上行', '下行']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {
                show: false
              },
              dataView: {
                show: false,
                readOnly: true
              },
              magicType: {
                show: false,
                type: ['line', 'bar', 'stack', 'tiled']
              },
              restore: {
                show: false
              },
              saveAsImage: {
                show: false
              },
              dataZoom: {
                show: false
              }
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日'
              ]
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位：个',
              nameTextStyle: {
                color: 'rgb(127, 63, 0)',
                fontStyle: 'normal',
                align: 'center',
                baseline: 'middle'
              },
              scale: true,
              boundaryGap: true
            }
          ],
          series: [
            {
              name: '上行',
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: [
                30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30,
                10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390,
                30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10, 30, 182, 434, 791, 390, 30, 10
              ]
            },
            {
              name: '下行',
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: [
                10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10,
                12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12,
                21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710, 10, 12, 21, 54, 260, 830, 710
              ]
            }
          ],
          grid: {
            height: '80%',
            width: '90%',
            x: '5%',
            y: '10%'
          }
        })
        this.jvmUsageTrends = echarts.init(this.$refs.jvmUsageTrends)
        this.jvmUsageTrends.setOption({
          tooltip: {
            trigger: 'axis',
            formatter: '{b}  <br/>{a} : ' + '{c}' + 'MB'
          },
          // legend: {
          //   data: ["邮件营销"]
          // },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天', '第八天', '第九天', '第十天']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位：MB',
              nameTextStyle: {
                color: 'rgb(127, 63, 0)',
                fontStyle: 'normal',
                align: 'center',
                baseline: 'middle'
              },
              scale: true,
              boundaryGap: true
            }
          ],
          series: [
            {
              name: 'JVM使用',
              type: 'line',
              stack: '总量',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: [12, 13, 10, 13, 900, 23, 21, 21, 21, 21, 21, 21],
              smooth: true
            }
          ],
          grid: {
            height: '80%',
            width: '90%',
            x: '5%',
            y: '10%'
          }
        })
        this.cpuUsageTrends = echarts.init(this.$refs.cpuUsageTrends)
        this.cpuUsageTrends.setOption({
          tooltip: {
            trigger: 'axis',
            formatter: '{b}  <br/>{a} : ' + '{c}' + '%'
          },
          // legend: {
          //   data: ["邮件营销"]
          // },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天', '第八天', '第九天', '第十天']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位：%',
              nameTextStyle: {
                color: 'rgb(127, 63, 0)',
                fontStyle: 'normal',
                align: 'center',
                baseline: 'middle'
              },
              scale: true,
              min: 0,
              max: 100,
              boundaryGap: true
            }
          ],
          series: [
            {
              name: 'CPU占有',
              type: 'line',
              stack: '总量',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: [12, 13, 10, 13, 90, 23, 21, 21, 21, 21, 21, 21],
              smooth: true
            }
          ],
          grid: {
            height: '80%',
            width: '90%',
            x: '5%',
            y: '10%'
          }
        })
      })
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading('正在加载缓存监控数据，请稍候！')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
